<template>
  <div>
    <TableCard :title="false">
      <div slot="table-card">
        <!-- 查询表格 -->
        <vxe-grid ref="xTable" v-bind="gridOptions" :export-config="{}" transfer>
          <!-- 新增按钮 -->
          <template #toolbar_buttons>
            <vxe-button @click="handleAdd" status="primary">新增</vxe-button>
          </template>
          <!--操作按钮-->
          <template #operate="{ row }">
            <a @click="handleEdit(row)">编辑</a>

            <a-divider type="vertical"/>
            <a-dropdown>
              <a class="ant-dropdown-link">
                更多 <a-icon type="down"/>
              </a>
              <a-menu slot="overlay">
                <a-menu-item>
                  <a href="javascript:;" @click="handleDetail(row)">详情</a>
                </a-menu-item>
                <a-menu-item>
                  <a href="javascript:;" @click="handleAddSub(row)">添加下级</a>
                </a-menu-item>
                <a-menu-item>
                  <a href="javascript:;" @click="removeEvent(row)">删除</a>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
            <!--            <vxe-button type="text" transfer @click="editEvent(row)">-->
            <!--              <a-icon type="edit" />-->
            <!--            </vxe-button>-->
            <!--            <vxe-button name="setting" type="text" transfer>-->
            <!--              <a-icon type="setting" />-->
            <!--              <template #dropdowns>-->
            <!--                <vxe-button type="text" content="添加下级" @click="handleAddLower(row)"></vxe-button>-->
            <!--                <vxe-button type="text" content="删除" @click="removeEvent(row)"></vxe-button>-->
            <!--              </template>-->
            <!--            </vxe-button>-->
          </template>
        </vxe-grid>
        <!-- modal And Form -->
        <PermissionModal ref="modalForm"></PermissionModal>
      </div>
    </TableCard>
  </div>
</template>

<script>
import TableCard from '@/components/Card/TableCard'
import PermissionModal from '@/views/system/PermissionManagement/modules/PermissionModal'
import { permissionDelete, permissionList } from '@/api/system'

export default {
  name: 'PermissionManagement',
  components: { PermissionModal, TableCard },
  data () {
    // 格式化显示
    // const formatterType = ({ cellValue }) => {
    //   const item = this.typeList.find(item => item.value === cellValue)
    //   return item ? item.label : '目录'
    // }
    return {
      gridOptions: {
        height: '750',
        resizable: true,
        showOverflow: 'tooltip',
        highlightHoverRow: true,
        keepSource: true,
        loading: false,
        size: 'medium',
        // height: 800,
        // 树形表配置
        treeConfig: {
          transform: true,
          expandAll: true,
          rowField: 'id',
          parentField: 'parentId'
        },
        // 工具栏按钮区配置
        toolbarConfig: {
          custom: true,
          export: true,
          zoom: true,
          refresh: true,
          slots: {
            buttons: 'toolbar_buttons'
          }
        },
        // checkboxConfig: {
        //   labelField: 'id'
        // },
        // 数据代理
        proxyConfig: {
          ajax: {
            query: () => {
              // 模拟后台接口
              return new Promise(resolve => {
                permissionList().then((res) => {
                  console.log(res)
                  const { data, code } = res.data
                  if (code === 200) {
                    resolve(data.records)
                  }
                })
              })
            }
          }
        },
        // 列配置
        columns: [
          { type: 'checkbox', width: 35 },
          { field: 'id', title: 'ID', width: 45 },
          { field: 'name', title: '资源名称', treeNode: true, width: 210 },
          { field: 'code', title: '权限编码', width: 170 },
          { field: 'icon', title: '菜单图标', width: 110 },
          // { field: 'type', title: '资源类型', formatter: formatterType, width: 110 },
          { field: 'type_text', title: '资源类型', width: 110 },
          { field: 'path', title: '菜单路径' },
          { field: 'redirect', title: '重定向' },
          { field: 'component', title: '前端组件' }, { field: 'orderNum', title: '排序', sortable: true, width: 70 },
          // { field: 'isOutsideShow', title: '前端组件' }, { field: 'orderNum', title: '排序', sortable: true, width: 70 },

          { title: '操作', width: 130, slots: { default: 'operate' } }
        ]
      },
      typeList: [
        {
          label: '目录',
          value: 0
        },
        {
          label: '菜单',
          value: 1
        },
        {
          label: '按钮/API',
          value: 2
        }
      ]
    }
  },
  provide () {
    return {
      reloadData: this.reloadData
    }
  },
  methods: {
    reloadData (row) {
      console.log(row)
      const $table = this.$refs.xTable
      permissionList().then((res) => {
        console.log(res)
        const { data, code } = res.data
        if (code === 200) {
          $table.reloadData(data)
        }
      })
    },
    handleAdd () {
      console.log(this.$refs.modalForm)
      this.$refs.modalForm.add()
      this.$refs.modalForm.title = '新增'
      // this.$refs.modalForm.disableSubmit = false
      // this.$XModal.message({ content: this.showEdit, status: 'info' })
      // console.log(this.showEdit)
    },
    handleEdit (row) {
      // console.log(row)
      this.$refs.modalForm.edit(row)
      console.log('editEvent', row)
      this.$refs.modalForm.title = '编辑'
    },
    handleAddSub (row) {
      console.log(this.$refs.modalForm)
      this.$refs.modalForm.addSub(row)
      this.$refs.modalForm.title = '新增'
    },
    handleDetail (row) {
      console.log(this.$refs.modalForm)
      this.$refs.modalForm.Detail(row)
      this.$refs.modalForm.title = '详情'
    },
    removeEvent (row) {
      console.log('removeEvent', row)
      this.$XModal.confirm('您确定要删除该数据?').then(type => {
        const $table = this.$refs.xTable
        if (type === 'confirm') {
          permissionDelete(row).then(res => {
            // console.log(res.data)
            const resData = res.data
            if (resData.code === 200) {
              // console.log(resData)
              $table.remove(row)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang='less'>
  //.vxe-button--dropdown {
  //  position: absolute;
  //}
</style>
